<template>
	<view class="index-box">
		<view class="f-24 c-ff8">【温馨提示】恭喜您获奖！我们将尽快为您安排快递，敬请留意电话！非快递物品请查看活动规则在指定地点领取！</view>
		<block v-for="(item, index) in dataList" :key="index">
			<view class="cell" @click="onClick(item)">
				<view class="f-28 c-66">{{ item.name }}</view>
					<view v-if="item.mode == '1' && !item.phone" class="f-28 c-ff8 ml-30" @click.stop="showPopup(item,index)">完善资料</view>
					<view v-else-if="item.mode == '1' && item.phone" class="f-28 c-ff8 ml-30">查看地址</view>
				<view class="cell-value c-99 ml-auto">{{ item.date_creation }}</view>
				<view class="cell-icon iconfont iconfont-e775"></view>
			</view>
			<view :class="['cell-info', item.pk_id === actId ? 'cell-info-act' : '']">
				<view class="f-24 c-99">{{ item.username }} {{ item.phone }}</view>
				<view class="f-24 c-99">{{ item.address }}</view>
			</view>
		</block>
		<sww-load-more :params="{...dataListParams,len:dataList.length < 12? 2:dataList.length}"></sww-load-more>
		<express-view v-model="visible" :orderId="orderId" @submitFinsh="submitFinsh"></express-view>
	</view>
</template>

<script>
import { pagingMixin } from '@/mixins/pagingMixin.js';
import expressView from './components/express.vue';
export default {
	mixins: [pagingMixin],
	components: {
		expressView
	},
	data() {
		return {
			visible: false,
			dataList: [],
			changeIndex:0,
			orderId: null,
			actId:null,
			activeId: null
		};
	},
	onLoad(options) {
		if (options && options.id) {
			this.activeId = Number(options.id);
			this.initPage();
		}
	},
	onReachBottom () {
		this._load_data()
	},
	methods: {
		initPage() {
			this._init_data('GetGameOrderList', { pk_id: this.activeId });
		},
		onClick(item) {
			if(item.mode == 1 && item.username){
				this.actId = item.pk_id
			}
		},
		showPopup(item,index) {
			this.changeIndex = index
			this.orderId = item.pk_id;
			this.visible = true;
			console.log('visible',this.visible)
		},
		submitFinsh (item) {
			this.dataList[this.changeIndex] = {
				...this.dataList[this.changeIndex],
				username:item.name,
				phone:item.phone,
				address:item.address,
			}
		}
	}
};
</script>

<style scoped lang="scss">
.c-ff8 {
	color: #ff8400;
}
.f-28 {
	font-size: 28rpx;
}
.ml-30 {
	margin-left: 30rpx;
}
.index-box {
	padding: 0 30rpx;
}
.cell {
	height: 100rpx;
	border-bottom: 1rpx solid #eee;
	display: flex;
	align-items: center;
}
.form-box {
	width: 100%;
	padding: 0 30rpx;
}
.form-title {
	width: 100%;
	height: 130rpx;
	padding: 15rpx 30rpx;
}
.form-sub-wrap {
	width: 100%;
	padding: 100rpx 0;
}
.form-sub {
	width: 400rpx;
	height: 70rpx;
	background-color: #e93324;
	border-radius: 35rpx;
}
.van-field__body--textarea.van-field__body--ios {
	margin-top: 0 !important;
}
.cell-info {
	width: 100%;
	height: 0;
	overflow: hidden;
	transition: height 1s;
}
.cell-info-act {
	height: auto;
	padding: 24rpx 0;
	border-bottom: 1rpx solid #eee;
}
.cell-value{
	font-size: 24rpx;
}
.cell-icon {
	margin-left: 12rpx;
	color: #999;
}
</style>
